<template>
	<view>
		<!-- <image src="./01.jpg" v-for="item of 4"></image> -->
	</view>
	<view style="margin: 50rpx 0 0 10rpx">
		<view class="listNull" v-if="imgList.length==0">
			<img src="@/static/images/listNull.png" alt="" />
			<text>该商家暂未上传</text>
		</view>
		<u--image v-for="(item,index) in imgList" :key="index" :showLoading="true" :src="item.filePath" width="380px" height="250px" @click="previewImage(index)"></u--image>
	</view>
	<view class="footer">
		以上信息均为商家提供，具体相关主管登记部门为准。经营者确保信息真实有效，如与实际不符或发生变更，请联系平台更新。
	</view>
</template>

<script setup>
	import API from "@/api/index.js";
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		reactive,
		ref
	} from "vue"

	let imgList = reactive([])

	const previewImage = (index)=>{
		uni.previewImage({
		          urls: [imgList[index].filePath], // 需要预览的图片http链接列表
		          current: 0 // 当前显示图片的索引
		      });
	}
	
	onLoad(async (option) => {
		if (option.companyId) {
			let res = await API.getQualification(option.companyId)
			console.log("res", res.data);
			Object.assign(imgList, res.data)
		}
	})
</script>
<style>
	>>>.u-image{
		margin-bottom:15rpx !important;
	}
</style>
<style lang="scss">
	.listNull {
		display: flex;
		flex-direction: column;
		text-align: center;
		margin: 0 auto;

		image {
			width: 200rpx;
			height: 200rpx;
			// margin: 10% 0 10% 10%;
			margin: 20rpx auto;
		}

		text {
			color: #919ea9;
		}
	}

	image {
		width: 100%;
		height: 480rpx;
	}

	.footer {
		position: fixed;
		right: 0;
		bottom: 0;
		background-color: #000;
		opacity: .8;
		z-index: 5;
		color: #fff;
		font-size: 26rpx;
		padding: 10rpx 20rpx;
	}
</style>